<template>
	<view class="realNamebg">
		<view class="pad20">
			<u--form labelPosition="left" ref="uForm">
				<view class="formView">
					<u-form-item label="开户银行" prop="bankName" ref="bankName" label-width="80px" required>
						<view v-if='!isEdit'>{{bankName}}</view>
						<u--input v-else v-model="bankName" placeholder="请输入" />
					</u-form-item>
				</view>

				<view class="formView">
					<u-form-item label="银行户名" prop="bankAccount" ref="bankAccount" label-width="80px" required>
						<view v-if='!isEdit'>{{bankAccount}}</view>
						<u--input v-else v-model="bankAccount" placeholder="请输入" />
					</u-form-item>
				</view>

				<view class="formView">
					<u-form-item label="银行卡号" prop="bankCard" ref="bankCard" label-width="80px" required>
						<view v-if='!isEdit'>{{bankCard}}</view>
						<u--input v-else v-model="bankCard" placeholder="请输入" />
					</u-form-item>
				</view>
			</u--form>
			<view class="modifybts bgMain colorfff bdRadius20 marAuto marT32" @tap.stop="submitForm">
				{{isEdit?'保存':'修改信息'}}
			</view>
		</view>
	</view>
</template>

<script>
	import commonApi from '@/api/common.js'
	export default {
		data() {
			return {
				inputStyle: {
					padding: '15rpx 20rpx',
				},
				bankName: '',
				bankAccount: '',
				bankCard: '',
				isEdit: false,
			}
		},
		onLoad(e) {
			this.bankName = this.userInfo.bankName;
			this.bankAccount = this.userInfo.bankAccount;
			this.bankCard = this.userInfo.bankCard;
			this.isEdit = this.userInfo.bankCard ? false : true;
		},
		methods: {
			submitForm() {
				if (!this.isEdit) {
					this.isEdit = true;
					return
				}
				if (!this.bankName) {
					this.showMsg('请输入开户银行')
					return
				}
				if (!this.bankAccount) {
					this.showMsg('请输入银行户名')
					return
				}
				if (!this.bankCard) {
					this.showMsg('请输入银行卡号')
					return
				}
				uni.showLoading({
					title: '加载中',
				})
				commonApi.editUserInfo({
					bankName: this.bankName,
					bankAccount: this.bankAccount,
					bankCard: this.bankCard,
				}).then((res) => {
					if (res.status == 200) {
						this.showMsg('操作成功')
						setTimeout(e => {
							uni.navigateBack()
						}, 500)
					}
				}).finally(uni.hideLoading());

			},
		}
	}
</script>

<style lang="scss" scoped>
	.realNamebg {
		width: 100%;
		min-height: calc(100vh - var(--window-bottom));

		.gyview {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 30rpx 36rpx;
			border-radius: 20rpx;
		}

		.formView {
			padding: 20rpx;
			background: #fff;
			padding: 10rpx 36rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;

			.topline {
				padding-top: 30rpx;
				border-top: 1rpx solid #E3E4E5;
			}

			.imgView {
				position: relative;
				height: 138rpx;
				width: 138rpx;

				.fileimg1 {
					position: absolute;
					top: 0;
					left: 0;
					width: 138rpx;
					height: 138rpx;
				}

				.del {
					position: absolute;
					right: -10rpx;
					top: -10rpx;
				}
			}
		}

		.modifybts {
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
		}


		.icon-size {
			width: 40rpx;
			height: 40rpx;
		}
	}

	::v-deep .u-input {
		background-color: #fff !important;
	}
</style>